<template>
  <div class="pf-flow-prop-signal" id="js-properties-panel-custom">
    <div class="panel-tab__content--title">
      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')"
        >创建新消息</el-button
      >
    </div>
    <el-table :data="messageList" size="mini" border>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
    </el-table>
    <div
      class="panel-tab__content--title"
      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
    >
      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')"
        >创建新信号</el-button
      >
    </div>
    <el-table :data="signalList" size="mini" border>
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
    </el-table>

    <el-dialog
      v-model="modelVisible"
      :title="modelConfig.title"
      :close-on-click-modal="false"
      width="400px"
      append-to-body
      destroy-on-close
    >
      <pf-form :config="modelConfig.form" :model="modelObjectForm"></pf-form>
      <template v-slot:footer>
        <el-button size="mini" @click="modelVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, Ref, toRefs } from 'vue';
import {
  buildMessageInfo,
  buildSignalInfo
} from '@/views/page-config/flow/custom-properties/form-data';
import { modeler, TaskName } from '@/views/page-config/flow/flow-modeler';
import { useNotice } from '@/components/element-plus/notice';

export default defineComponent({
  name: 'SignalAndMessage',
  setup(props) {
    const initDataList = () => {
      const rootElements = modeler.getModeler().getDefinitions().rootElements;
      messageIdMap.clear();
      signalIdMap.clear();
      messageList.value = [];
      signalList.value = [];
      rootElements.forEach((el: any) => {
        if (el.$type === TaskName.message) {
          messageIdMap.set(el.id, true);
          messageList.value.push({ ...el });
        }
        if (el.$type === TaskName.signal) {
          signalIdMap.set(el.id, true);
          signalList.value.push({ ...el });
        }
      });
    };
    const openModel = (type: string) => {
      modelType = type;
      modelVisible.value = true;
      modelObjectForm.value = {} as any;
    };
    const addNewObject = () => {
      if (modelType === 'message') {
        if (messageIdMap.has(modelObjectForm.value.id)) {
          return useNotice().message.error('该消息已存在，请修改id后重新保存');
        }
        const messageRef = modeler.getModdle().create(TaskName.message, modelObjectForm.value);
        modeler.getModeler().getDefinitions().rootElements.push(messageRef);
      } else {
        if (signalIdMap.has(modelObjectForm.value.id)) {
          return useNotice().message.error('该信号已存在，请修改id后重新保存');
        }
        const signalRef = modeler.getModdle().create(TaskName.signal, modelObjectForm.value);
        modeler.getModeler().getDefinitions().rootElements.push(signalRef);
      }
      modelVisible.value = false;
      initDataList();
    };

    const messageIdMap = new Map();
    const signalIdMap = new Map();
    const signalList: Ref<{ id: string; name: string }[]> = ref([]);
    const messageList: Ref<{ id: string; name: string }[]> = ref([]);
    let modelType = '';
    const modelVisible = ref(false);
    const modelObjectForm: Ref<{ id: string; name: string }> = ref({} as any);
    const modelConfig = computed(() => {
      if (modelType === 'message') {
        return { title: '创建消息', form: buildMessageInfo() };
      } else {
        return { title: '创建信号', form: buildSignalInfo() };
      }
    });
    onMounted(() => {
      initDataList();
    });
    return {
      openModel,
      signalList,
      messageList,
      modelConfig,
      modelVisible,
      addNewObject,
      modelObjectForm
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-design {
    //margin: 10px;
    //padding: 0;
    //overflow-y: auto;
    height: 100%;
    &-canvas {
      height: 100%;
    }
    &-panel {
      position: absolute;
      height: 100%;
      width: 30%;
      top: 100px;
      right: 10px;
    }
    &-panel-custom {
      position: absolute;
      height: 100%;
      width: 30%;
      top: 100px;
      right: 10px;
      overflow-y: auto;
      background: #f0f2f5;
    }
  }
}
</style>
